<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-input
                maxlength="50"
            v-model="query.dishesName"
            placeholder="请输入菜谱名称"
            clearable
          ></el-input
        ></el-col>
        <el-col :span="4">
          <el-select
            v-model="query.dishesTypeText"
            placeholder="请选择菜谱类型"
            clearable
          >
            <el-option
              v-for="item in [
                '大荤',
                '小荤',
                '蔬菜',
                '汤',
                '主食',
                '点心',
                '其他',
              ]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">搜索</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="dishesName" label="菜谱名称" width="180">
        </el-table-column>
        <el-table-column prop="dishesTypeText" label="菜谱类型" width="180">
        </el-table-column>
        <el-table-column prop="foodInformation" label="食材信息"> 
          <template slot-scope="scope">
            <div>
              {{ scope.row.foodInformation||'--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                     <el-button size="small" type="primary" @click="viewMenu(scope.row)">查看</el-button>
            </template> 
         </el-table-column>
      </el-table>
          <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
    </el-card>


       <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看菜谱详情"
    >
      <el-form label-width="80px">


 <el-row>
          <el-col :span="12">
             <el-form-item label="菜谱名称"> {{ data.dishesName }} </el-form-item>
          </el-col>
          <el-col :span="12">
           <el-form-item label="菜谱类型"> {{ data.dishesTypeText }} </el-form-item>
          </el-col>
        </el-row>





      
        
        <el-form-item label="食材信息"> {{ data.foodInformation||'--' }} </el-form-item>
        <el-form-item label="备注"> {{ data.remark||'--' }} </el-form-item>
        <el-form-item label="培训照片">
          <el-image
            style="width: 150px; height: 150px;margin-right:10px"
            :src="data.dishesFileurl"
            fit="cover"
            :preview-src-list="[data.dishesFileurl]"
          ></el-image>
        </el-form-item>
      </el-form>
    </rz-dialog>



  </div>
</template>
<script>
import { QueryUnitRecipeList } from "@/api/modules/enterprise";

export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      query: {
        dishesName: "",
        dishesTypeText: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        unitId: sessionStorage.getItem("interpretation"),
      },
      tableData: [],
      total:0,
      dialogVisible:false,
      data:{}
    };
  },
  // 方法
  methods: {
    getList() {
      QueryUnitRecipeList(this.query).then((res) => {
            this.tableData=res.data
            this.total=res.totalCount
      });
    },
    viewMenu(e){
        this.data=e
        this.dialogVisible=true
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
